import Divider from 'antd/es/divider';
import InputNumber from 'antd/es/input-number';
import Switch from 'antd/es/switch';
import ToolTip from 'antd/es/tooltip';
import { AppStore } from '../../../../store';
import './index.less';

const INTERACTION_MODE = [{
    key: 'pan',
    text: '平移',
    description: '鼠标右键/双指移动',
}, {
    key: 'zoom',
    text: '缩放',
    description: '鼠标滚轮/双指伸缩',
}, {
    key: 'rotation',
    text: '旋转',
    description: '鼠标左键/单指移动',
}]

let fittingOutlineVisible = false;

export function ViewDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
    }>) => JSX.Element[]
}) {
    const { createButton } = props;
    const { appState: { app } } = AppStore.useContainer();

    const CSceneApis = [
        {
            name: '重置场景',
            onClick: () => app!.sceneService.clear()
        },
        {
            name: '更新场景尺寸',
            onClick: () => app!.sceneService.resize()
        },
        {
            name: '重置视角',
            onClick: () => app!.sceneService.resetPerspective()
        },
        {
            name: '切换孔槽线框展示',
            onClick: () => {
                fittingOutlineVisible = !fittingOutlineVisible;
                app!.sceneService.config.unstable__fittingOutline.set(fittingOutlineVisible);
            }
        },
    ];

    return <>
        <Divider>场景展示</Divider>
        {createButton(CSceneApis)}
        <Divider>场景配置</Divider>

        {INTERACTION_MODE.map((mode) => (
            <div className='scene-config-item' key={mode.key}>
                <ToolTip title={mode.description}>
                    <div className='common-title'>{mode.text}</div>
                </ToolTip>
                <Switch onChange={(checked) => app?.sceneService.config.interaction[mode.key].enabled.set(checked)} checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={app?.sceneService.config.interaction[mode.key].enabled.get()} />
                <InputNumber onChange={(value) => app?.sceneService.config.interaction[mode.key].speed.set(value)} defaultValue={app?.sceneService.config.interaction[mode.key].speed.get()} min={0} max={10} placeholder='灵敏度' step={0.1} size='small'></InputNumber>
            </div>
        ))}

    </>
}